﻿<template>
    <div class="page-main Department">
        <DataTable ref="DepartmentDataTableRef" :data="list" :hasID="false" :hasSeq="false" :hasTop="false" :hasPager="false" :hasCheckbox="false" divHeight="100%" :treeConfig="treeConfig" :row-config="rowConfig" v-bind="$attrs">
            <vxe-column title="名称" field="name" min-width="420" tree-node align="left" header-align="center" show-overflow></vxe-column>

            <vxe-column title="类型" min-width="120" show-overflow>
                <template #default="{ row }">
                    <span :class="Enums.Department_Type.Get(row.type).color">{{ Enums.Department_Type.Get(row.type).text }}</span>
                </template>
            </vxe-column>

            <vxe-column title="用户数量" min-width="150" show-overflow>
                <template #default="{ row }">
                    {{ row.userCount || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="负责人" min-width="150" show-overflow>
                <template #default="{ row }">
                    {{ row.leaderName || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="数据归属" min-width="150" show-overflow>
                <template #default="{ row }">
                    {{ row.selectDepartmentNames?.join("，") || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="创建时间" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ Gx.YMD(row.createDate) }}
                </template>
            </vxe-column>

            <vxe-column title="修改时间" min-width="120" show-overflow>
                <template #default="{ row }">
                    {{ Gx.YMD(row.updateDate) }}
                </template>
            </vxe-column>

            <vxe-column title="操作" width="330" v-if="!isSelect">
                <template #default="{ row }">
                    <div v-if="row.hasPermission">
                        <el-button v-if="Gx.HasPermission(10302)" type="primary" @click.stop="onCreate(row)">创建</el-button>
                        <el-button v-if="Gx.HasPermission(10303)" type="primary" @click.stop="onShowDetail(row)">编辑</el-button>
                        <el-button v-if="Gx.HasPermission(10304) && !(row.children && row.children.length > 0) && (Gx.IsEmpty(row.userCount) || row.userCount == 0) && row.type != Enums.Department_Type.集团" type="danger" @click.stop="onDelete(row)">删除</el-button>
                        <el-button v-if="Gx.HasPermission(10305)" type="warning" @click.stop="onShowDepartmentUser(row)">管理用户</el-button>
                    </div>
                </template>
            </vxe-column>

            <!-- 在添加按钮后面的搜索条件 -->
            <template #otherFilter></template>

            <!-- 在搜索按钮后面的按钮 -->
            <template #otherBtn></template>

            <!-- 顶部右侧按钮 -->
            <template #rightBtn v-if="!isSelect"></template>

            <!-- 高级搜索内容 -->
            <template #Advfilter>
                <!-- <el-form v-model="filterModel" label-position="top" @submit.prevent></el-form> -->
            </template>
        </DataTable>

        <!-- 部门详情 -->
        <DepartmentDetail ref="DepartmentDetailRef" v-if="isShowDetail" @close="onCloseDetail"></DepartmentDetail>

        <!-- 管理用户 -->
        <DepartmentUser ref="DepartmentUserRef" v-if="isShowDepartmentUser" @close="onCloseDepartmentUser"></DepartmentUser>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { TipsType } from "@/_gx/TsEnums";
import DepartmentDetail from "./DepartmentDetail.vue";
import DepartmentUser from "./DepartmentUser.vue";

/********************************************** 接收参数 **********************************************/

const props = defineProps({
    //是否为选择组件，在此组件用做弹框选择的子组件时传true
    isSelect: {
        type: Boolean,
        default: false,
    },

    //默认搜索条件，如果是多选的话可以增加已选数据的过滤
    defaultFilter: {
        type: Object,
        default: {},
    },
});

/********************************************** 列表相关定义 **********************************************/

//表格的数据
const list = ref([]);

//树型表格配置项
const treeConfig = {
    rowField: "departmentID",
    parentField: "parentID",
    transform: true,
    trigger: "row",
    expandAll: true,
    reserve: true,
};

//行配置每行的key
const rowConfig = {
    keyField: "departmentID",
};

//DataTable对象，使用此对象来调用DataTable组件中抛出的属性或方法
const DepartmentDataTableRef = ref(null);

/********************************************** 列表方法与事件 **********************************************/

//页面加载
onMounted(() => {
    Init();
});

//初始化
const Init = () => {
    GetData();
};

/********************************************** 列表 **********************************************/

//得到表格数据
const GetData = () => {
    let _data = {};

    App.CallApi(Api.Department.GetAll(), {
        data: _data,
        success: (res: any) => {
            list.value = res;
        },
    });
};

//创建子部门
const onCreate = (row) => {
    onShowDetail({ parentID: row.departmentID, parentName: row.name, parentType: row.type });
};

//删除部门
const onDelete = (row) => {
    App.Confirm({
        msg: "确定要删除选择的数据？",
        type: TipsType.Warning,
        onOk: () => {
            App.CallApi(Api.Department.Delete(row.autoID), {
                success: () => {
                    GetData();
                },
            });
        },
    });
};

/********************************************** 列表按钮功能 **********************************************/

const isShowDepartmentUser = ref(false);
const DepartmentUserRef = ref(null);

//显示管理用户
const onShowDepartmentUser = (row) => {
    isShowDepartmentUser.value = true;
    rowAutoID.value = row?.autoID;
    nextTick(() => {
        DepartmentUserRef.value.Init();
    });
};

//关闭管理用户
const onCloseDepartmentUser = () => {
    isShowDepartmentUser.value = false;
    GetData();
};

/********************************************** 详情页相关 **********************************************/

//是否显示详情对话框
const isShowDetail = ref(false);
//详情对话框Ref对象
const DepartmentDetailRef = ref(null);
//向子组件传值
const rowAutoID = ref<number | null>(null);
provide("rowAutoID", rowAutoID);

//显示详情
const onShowDetail = (row) => {
    isShowDetail.value = true;
    rowAutoID.value = row?.autoID;
    nextTick(() => {
        DepartmentDetailRef.value.Init(row.parentID, row.parentName, row.parentType);
    });
};

//关闭详情
const onCloseDetail = (isRefresh: boolean) => {
    if (isRefresh) {
        GetData();
    }

    isShowDetail.value = false;
};

//向上抛出的事件与方法
const emits = defineEmits(["setSelectData"]);
defineExpose({ DepartmentDataTableRef });
</script>
